<template>
  <div class="content">
    <p class="fhbtn"><a href="javascript:;" @click="$router.go(-1)"></a></p>
    <h1>登陆</h1>
    <div class="login-box">
      <p class="lsolid"></p>
      <div class="login">
        <router-link to="/login">登录</router-link>
        <span></span>
        <router-link to="/reg">注册</router-link>
      </div>
      <p class="rsolid"></p>
    </div>
    <ul>
      <li class="lifirst">
        <input type="text" v-model="username" />
        <span>帐号</span>
      </li>
      <li>
        <input type="password" v-model="password" />
        <span>密码</span>
        <!-- 提醒信息 -->
      </li>
      {{
        mess
      }}
    </ul>
    <div class="footbox">
      <input type="button" value="登 录" class="login-btn" @click="login" />
      <a href="javascript:;" class="tishi">忘记密码？</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  props: {},
  data() {
    return {
      username: "test01",
      password: "1",
      mess: "",
    };
  },
  components: {},
  mounted() {},
  updated() {},
  methods: {
    login() {
      //1. axios 携带username，password，post
      this.$axios({
        url: "/public/login",
        method: "post",
        data: { username: this.username, password: this.password },
      }).then((res) => {
        if (res.err === 1) {
          //2. 失败 描述失败信息到页面
          this.mess = res.msg;
        } else if (res.err === 0) {
          //3. 成功 种token到本地,跳转到之前 | 用户中心
          window.localStorage.setItem("user", JSON.stringify(res));
          if (this.$route.query.path) {
            this.$router.push(this.$route.query.path);
          } else {
            this.$router.push("/rec");
          }
        }
      });
    },
  },
  computed: {},
};
</script>

<style scoped>
.content {
  background: linear-gradient(rgba(251, 77, 47, 0.5), rgba(251, 163, 152, 0.5));
  max-width: 6.4rem;
  margin: 0 auto;
}
.content .fhbtn {
  padding-top: 0.27rem;
}
.content .fhbtn a {
  display: block;
  width: 0.23rem;
  height: 0.25rem;
  background-size: 100%;
  margin-left: 0.3rem;
}
.content h1 {
  width: 2.18rem;
  height: 1.35rem;
  background-size: 100%;
  margin: 0 auto;
  margin-top: 1.22rem;
}
.content .login {
  width: 2rem;
  height: 0.38rem;
  margin: 0 auto;
  margin-top: 0.85rem;
}
.login a {
  width: 0.97rem;
  height: 0.38rem;
  font-size: 0.35rem;
  line-height: 0.38rem;
  float: left;
  color: #4c4f50;
  text-align: center;
}
.login span {
  float: left;
  height: 0.38rem;
  border-left: 1px solid #4c4f50;
}
.content .login-box {
  position: relative;
}
.content .login-box .lsolid {
  width: 1.96rem;
  height: 0.18rem;
  border-bottom: 1px solid #4c4f50;
  position: absolute;
  top: 0;
  left: 0.1rem;
}
.content .login-box .rsolid {
  width: 1.96rem;
  height: 0.18rem;
  border-bottom: 1px solid #4c4f50;
  position: absolute;
  top: 0;
  right: 0.1rem;
}
.content ul {
  width: 5.78rem;
  height: 1.92rem;
  border: 1px solid #e5e7e8;
  background: #fff;
  margin: 0 auto;
  margin-top: 0.68rem;
}
.content ul li {
  height: 0.95rem;
  position: relative;
}
.content ul li.lifirst {
  border-bottom: 1px solid #e5e7e8;
}
.content ul li input {
  padding-left: 1.24rem;
  width: 4.54rem;
  height: 100%;
  font-size: 0.4rem;
}
.content ul li span {
  width: 1.23rem;
  height: 0.49rem;
  position: absolute;
  top: 0.26rem;
  left: 0;
  border-right: 1px solid #676868;
  color: #676868;
  font-size: 0.25rem;
  line-height: 0.49rem;
  text-align: center;
}
.content .footbox {
  width: 4.65rem;
  height: 0.65rem;
  margin: 0 auto;
}
.content .login-btn {
  width: 4.65rem;
  height: 0.65rem;
  background: #4c4f50;
  color: #fff;
  text-align: center;
  line-height: 0.65rem;
  border-radius: 8px;
  display: block;
  margin-top: 0.62rem;
  font-size: 0.28rem;
}
.content .tishi {
  width: 1.4rem;
  font-size: 0.25rem;
  margin-top: 0.28rem;
  display: block;
}
</style>
